import { map, includes, groupBy, first, find } from "lodash";
import React, { useState, useMemo, useCallback,useEffect } from "react";
import PropTypes from "prop-types";
import Select from "antd/lib/select";
import Modal from "antd/lib/modal";
import Checkbox from "antd/lib/checkbox";
import Input from "antd/lib/input";
import Radio from "antd/lib/radio";
import InputNumber from "antd/lib/input-number";
import Tabs from "antd/lib/tabs";
import Collapse from "antd/lib/collapse";
import FileButton from "@/components/portal/FileButton";
import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
import { MappingType, ParameterMappingListInput, parameterMappingsToEditableMappings } from "@/components/ParameterMappingInput";
import QuerySelector from "@/components/QuerySelector";
import notification from "@/services/notification";
import { Query } from "@/services/query";
import { Dashboard } from "@/services/dashboard";
import cfg from "@/config/dashboard-grid-options";

const { TabPane } = Tabs;
const { Panel } = Collapse;
const { Option, OptGroup } = Select;

function VisualizationSelect({ query, visualization, onChange }) {
  const visualizationGroups = useMemo(() => {
    return query ? groupBy(query.visualizations, "type") : {};
  }, [query]);

  const handleChange = useCallback(
    visualizationId => {
      const selectedVisualization = query ? find(query.visualizations, { id: visualizationId }) : null;
      onChange(selectedVisualization || null);
    },
    [query, onChange]
  );

  if (!query) {
    return null;
  }

  const groups = {"BOXPLOT":"箱线图","CHART":"图表","CHOROPLETH":"地理分布图",
    "COHORT":"同期群分析","COUNTER":"计数器和时钟","MARKDOWN":"Markdown","VIDEO":"视频","DETAILS":"记录明细显示","FUNNEL":"漏斗分析",
    "MAP":"地理标记","PIVOT":"数据透视表","SANKEY":"桑基图","SUNBURST_SEQUENCE":"旭辉图",
    "TABLE":"表格","LIST":"列表","CRUD":"表单输入","TOOLBAR":"工具栏","WORD_CLOUD":"词云图"};

  return (
    <div>
      <div className="form-group">
        选择视图
        <Select
          // id="choose-visualization"
          className="w-100"
          value={visualization ? visualization.id : undefined}
          onChange={handleChange}>
          {map(visualizationGroups, (visualizations, groupKey) => (
            <OptGroup key={groupKey} label={groups[groupKey]}>
              {map(visualizations, visualization => (
                <Option key={`${visualization.id}`} value={visualization.id}>
                  {visualization.name}
                </Option>
              ))}
            </OptGroup>
          ))}
        </Select>
      </div>
    </div>
  );
}

VisualizationSelect.propTypes = {
  query: PropTypes.object,
  visualization: PropTypes.object,
  onChange: PropTypes.func,
};

VisualizationSelect.defaultProps = {
  query: null,
  visualization: null,
  onChange: () => {},
};

function AddWidgetDialog({ dialog, dashboard, widget }) {
  const [selectedQuery, setSelectedQuery] = useState(null);
  const [selectedQuery1, setSelectedQuery1] = useState(null);
  const [selectedQuery2, setSelectedQuery2] = useState(null);
  const [selectedQuery3, setSelectedQuery3] = useState(null);
  const [selectedQuery4, setSelectedQuery4] = useState(null);
  const [selectedQuery5, setSelectedQuery5] = useState(null);
  const [selectedVisualization, setSelectedVisualization] = useState(null);
  const [parameterMappings, setParameterMappings] = useState([]);
  const [position, setPosition] = useState({});
  const [widgetOptions, setWidgetOptions] = useState({});
  const [dashboardsAll, setDashboardsAll] = useState([]);

  const processChange = (key, value) => {
    let ps = {...widgetOptions}
    ps[key] = value

    setWidgetOptions(ps);
  }

  const processPosition = (key, value) => {
    let ps = {...position}
    ps[key] = value;

    setPosition(ps);
  }

  const uploadChangeTitle = (value) => {
   processChange("widget_titlebg", value);
  }

  const uploadChangeWidget = (value) => {
    processChange("widget_image", value);
  }

  useEffect(() => {
    if (Object.getOwnPropertyNames(widget).length !== 0 && widget.visualization) {
      var vis = widget.visualization;
      if (widget.hasOwnProperty("visualization_origin") && widget.visualization_origin) vis = widget.visualization_origin
      
      setSelectedVisualization(vis);
      Query.getShort({ id: vis.query ? vis.query.id : vis.query_id })
      .then(query => {
        if (query) {setSelectedQuery(query);}

        if (widget.options) {
          if (widget.options.parameterMappings) {
            const mappings = parameterMappingsToEditableMappings(
              widget.options.parameterMappings,
              widget.query.getParametersDefs(),
              map(dashboard.getParametersDefs(), p => p.name)
            );
            setParameterMappings(mappings);
          }

          if (widget.options.position) {
            const pos = widget.options.position;
            setPosition(pos);
          }

          if (widget.options.widgetOptions) {
            const wos = widget.options.widgetOptions;
            setWidgetOptions(wos);

            if (wos.toggle_query1 && wos.toggle_view1) {
              Query.getShort({ id: wos.toggle_query1 })
              .then(query => {
                if (query) setSelectedQuery1(query);
              })
            }
            if (wos.toggle_query2 && wos.toggle_view2) {
              Query.getShort({ id: wos.toggle_query2 })
              .then(query => {
                if (query) setSelectedQuery2(query);
              })
            }
            if (wos.toggle_query3 && wos.toggle_view3) {
              Query.getShort({ id: wos.toggle_query3 })
              .then(query => {
                if (query) setSelectedQuery3(query);
              })
            }
            if (wos.toggle_query4 && wos.toggle_view4) {
              Query.getShort({ id: wos.toggle_query4 })
              .then(query => {
                if (query) setSelectedQuery4(query);
              })
            }
            if (wos.toggle_query5 && wos.toggle_view5) {
              Query.getShort({ id: wos.toggle_query5 })
              .then(query => {
                if (query) setSelectedQuery5(query);
              })
            }
          }
        }
      })
    }
  },[dashboard, widget]);

  useEffect(() => {
    Dashboard.publish()
    .then(results => {setDashboardsAll(results);})
    .catch(() => []);
  },[]);

  const selectQuery = useCallback(
    (queryId, index=0) => {
      if (index === 0) {
        setSelectedVisualization(null);
        setParameterMappings([]);
      }
 
      if (queryId) {
        Query.getShort({ id: queryId }).then(query => {
          if (query) {
            const existingParamNames = map(dashboard.getParametersDefs(), param => param.name);
            if (index === 0) setSelectedQuery(query);
            else if (index === 1) setSelectedQuery1(query);
            else if (index === 2) setSelectedQuery2(query);
            else if (index === 3) setSelectedQuery3(query);
            else if (index === 4) setSelectedQuery4(query);
            else if (index === 5) setSelectedQuery5(query);
            if (index === 0) {
              setParameterMappings(
                map(query.getParametersDefs(), param => ({
                  name: param.name,
                  type: includes(existingParamNames, param.name)
                    ? MappingType.DashboardMapToExisting
                    : MappingType.DashboardAddNew,
                  mapTo: param.name,
                  value: param.normalizedValue,
                  title: "",
                  param,
                }))
              );
            } else {
              widgetOptions["toggle_query" + index] = queryId;
            }
            if (query.visualizations.length > 0) {
              if (index === 0) {
                setSelectedVisualization(first(query.visualizations));
              } else {
                widgetOptions["toggle_view" + index] = first(query.visualizations).id;
              }
            } else {
              widgetOptions["toggle_view" + index] = null;
            }
          }
        });
      } else if (index > 0) {
        if (index===1) setSelectedQuery1(null);
        if (index===2) setSelectedQuery2(null);
        if (index===3) setSelectedQuery3(null);
        if (index===4) setSelectedQuery4(null);
        if (index===5) setSelectedQuery5(null);

        widgetOptions["toggle_query" + index] = null;
        widgetOptions["toggle_view" + index] = null;
      }
    },
    [dashboard, widgetOptions]
  );

  const saveWidget = useCallback(() => {
    if (!selectedVisualization) {
      notification.error("主视图不能为空！");
      return;
    }
    dialog.close({ visualization: selectedVisualization, parameterMappings, widgetOptions, position }).catch(() => {
      notification.error("部件未能添加！");
    });
  }, [dialog, selectedVisualization, parameterMappings, widgetOptions, position]);

  const existingParams = dashboard.getParametersDefs();

  return (
    <Modal
      {...dialog.props}
      maskClosable = {false}
      title={Object.getOwnPropertyNames(widget).length !== 0 ? "编辑部件：" + widget.id : "添加部件"}
      onOk={saveWidget}
      okButtonProps={{
        ...dialog.props.okButtonProps,
        disabled: dialog.props.okButtonProps.disabled,
      }}
      okText={Object.getOwnPropertyNames(widget).length !== 0 ? "确定" : "添加至报表"}
      cancelText="取消"
      width={700}>
      <Tabs accordion defaultActiveKey={['TabSet']}>
        <TabPane tab="基本设置" key="TabSet">
          <div data-test="AddWidgetDialog">
            <QuerySelector selectedQuery={selectedQuery} onChange={query => selectQuery(query ? query.id : null)} />
            {selectedQuery && (
              <VisualizationSelect
                query={selectedQuery}
                visualization={selectedVisualization}
                onChange={setSelectedVisualization}
              />
            )}

            {parameterMappings.length > 0 && [
                "参数",
              <ParameterMappingListInput
                key="parameters-list"
                id="parameter-mappings"
                mappings={parameterMappings}
                existingParams={existingParams}
                onChange={setParameterMappings}
              />,
            ]}
          </div>
        </TabPane>
         <TabPane tab="显示设置" key="TabDisplay">
          <div>
            <br/>
            部件个性标题：
            <Input type="text" style={{width:300}}
              value={widgetOptions && widgetOptions.widget_title}
              title="支持HTML5语法"
              onChange={e => processChange("widget_title", e.target.value)}
            />
            &nbsp;&nbsp;
            <Checkbox
              name="title_center"
              checked={widgetOptions && widgetOptions.title_center}
              onChange={e => processChange("title_center", e.target.checked)}>
              部件标题居中
            </Checkbox>  
            <br/>
            (支持url取数函数)<a href="https://www.dazdata.com/docs/college/markdown/3.html" target="_blank" rel="noopener noreferrer">官网指南</a>；例：&#123;&#123;&quot;parameter&quot;:&quot;id&quot;&#125;&#125;
            <br/><br/>
            标题个性背景：
            <Input type="text" style={{width:300}}
              value={widgetOptions && widgetOptions.widget_titlebg}
              onChange={e => processChange("widget_titlebg", e.target.value)}
            />
            <FileButton doneEventHandler={uploadChangeTitle} position="center" />
            <br/>
            <Checkbox
              name="title_bg"
              checked={widgetOptions && widgetOptions.title_bg}
              onChange={e => processChange("title_bg", e.target.checked)}>
              显示默认标题背景图片
            </Checkbox>  
            &nbsp;&nbsp;
            <a href="https://www.dazdata.com/docs/use/16.html" target="_blank" rel="noopener noreferrer">官网指南</a>
            例：url("/static/images/dark/titlebg.png") no-repeat center
            <br/><br/>
            部件个性背景：
            <Input type="text" style={{width:300}}
              value={widgetOptions && widgetOptions.widget_image}
              onChange={e => processChange("widget_image", e.target.value)}
            />
            <FileButton doneEventHandler={uploadChangeWidget} position="center/100% 100%" />
            <br/>
            <Checkbox
              name="widget_bg"
              checked={widgetOptions && widgetOptions.widget_bg}
              onChange={e => processChange("widget_bg", e.target.checked)}>
              显示默认部件背景图片
            </Checkbox>  
            &nbsp;&nbsp;
            <a href="https://www.dazdata.com/docs/use/16.html" target="_blank" rel="noopener noreferrer">官网指南</a>
            例：url("/static/images/dark/widgetbg.jpg") center/100% 100%
            <br/><br/>
            部件个性描述：
            <Input type="text" style={{width:300}}
              value={widgetOptions && widgetOptions.widget_description}
              title="支持HTML5语法"
              onChange={e => processChange("widget_description", e.target.value)}
            />
            &nbsp;&nbsp;
            <Checkbox
              name="showDescription"
              checked={widgetOptions && widgetOptions.showDescription}
              onChange={e => processChange("showDescription", e.target.checked)}>
              显示描述
            </Checkbox>  
          </div>  
          <div>
            <br/>
            固定视图高度：
            <Input type="text" style={{width:127}}
              value={widgetOptions && widgetOptions.widget_height}
              onChange={e => processChange("widget_height", e.target.value)}
            />
            &nbsp;&nbsp;宽度：
            <Input type="text" style={{width:127}}
              value={widgetOptions && widgetOptions.widget_width}
              onChange={e => processChange("widget_width", e.target.value)}
            />
           &nbsp;&nbsp;如：500px，超出将可滚动
          </div>
          <div>
            <br/>
            部件边框样式：
            <Select style={{ width: 200 }} 
              value={widgetOptions && widgetOptions.widget_border}
              disabled={widgetOptions && (widgetOptions.widget_image || widgetOptions.widget_bg)}
              onChange={value => processChange("widget_border", value)}>
              <Option value=''>--无边框--</Option>
              <Option value='line'>单线框</Option>
              <Option value='border'>四角加粗</Option>
              <Option value='bold'>线框四角加粗</Option>
              <Option value='middle'>线框四角加粗(标题栏居中)</Option>
              <Option value='cloud'>四角祥云</Option>
              <Option value='linecloud'>线框四角祥云</Option>
            </Select>
            &nbsp;&nbsp;
            <Checkbox
              name="widget_bgtransparent"
              checked={widgetOptions && widgetOptions.widget_bgtransparent}
              disabled={widgetOptions && (widgetOptions.widget_image || widgetOptions.widget_bg)}
              onChange={e => processChange("widget_bgtransparent", e.target.checked)}>
              部件背景透明(不应用部件背景样式)
            </Checkbox>  
          </div>  
          <div>
            <br/>
            <Checkbox
              name="hide_header"
              checked={widgetOptions && widgetOptions.hide_header}
              onChange={e => processChange("hide_header", e.target.checked)}>
              隐藏视图标题
            </Checkbox>  
            <Checkbox
              name="hide_link"
              checked={widgetOptions && widgetOptions.hide_link}
              onChange={e => processChange("hide_link", e.target.checked)}>
              隐藏链接区(嵌入方式显示视图)
            </Checkbox>  
            <Checkbox
              name="hide_parameters"
              checked={widgetOptions && widgetOptions.hide_parameters}
              onChange={e => processChange("hide_parameters", e.target.checked)}>
              隐藏筛选区
            </Checkbox>  
            <Checkbox
              name="hide_timestamp"
              checked={widgetOptions && widgetOptions.hide_timestamp}
              onChange={e => processChange("hide_timestamp", e.target.checked)}>
              隐藏刷新区
            </Checkbox>  
          </div>  
          <div>
            <br/>
            <Checkbox
              name="no_refresh"
              checked={widgetOptions && widgetOptions.no_refresh}
              onChange={e => processChange("no_refresh", e.target.checked)}>
              不随报表自动刷新
            </Checkbox>  
            &nbsp;&nbsp;
            <InputNumber
              min="1"
              defaultValue={(widgetOptions && widgetOptions["rate_refresh"]) || "1"}
              disabled={widgetOptions && widgetOptions.no_refresh}
              onChange={value => processChange("rate_refresh", value)}
            />
            随报表自动刷新慢速倍数
            &nbsp;&nbsp;
            <Checkbox
              name="title_parameter"
              checked={widgetOptions && widgetOptions.title_parameter}
              onChange={e => processChange("title_parameter", e.target.checked)}>
              部件参数放置在标题栏
            </Checkbox>  
          </div>  
          <div>
            <br/>
            <Checkbox
              name="mainWidget"
              checked={widgetOptions && widgetOptions.mainWidget}
              onChange={e => processChange("mainWidget", e.target.checked)}>
              设置为主部件
            </Checkbox>  
            (Portal模式充满报表背景区)
            &nbsp;&nbsp;
            <Checkbox
              name="widget_toplayer"
              checked={widgetOptions && widgetOptions.widget_toplayer}
              disabled={widgetOptions && widgetOptions.mainWidget}
              onChange={e => processChange("widget_toplayer", e.target.checked)}>
              置于顶层
            </Checkbox>  
            &nbsp;&nbsp;
            <Checkbox
              name="widget_noscroll"
              checked={widgetOptions && widgetOptions.widget_noscroll}
              onChange={e => processChange("widget_noscroll", e.target.checked)}>
              禁止滚动条
            </Checkbox>  
            <Checkbox
              name="widget_nomenu"
              checked={widgetOptions && widgetOptions.widget_nomenu}
              onChange={e => processChange("widget_nomenu", e.target.checked)}>
              禁止菜单(Portal模式)
            </Checkbox>  
          </div>  
          <div>
            <br/>
            部件位置水平方向(列)：
            起点：
            <InputNumber
              min={0}
              max={cfg.maxSizeX}
              defaultValue={(position && position.col) || 0}
              onChange={value => processPosition("col", value)}
            />
            宽度：
            <InputNumber
              min={cfg.minSizeX}
              max={cfg.maxSizeX}
              defaultValue={(position && position.sizeX) || cfg.defaultSizeX}
              onChange={value => processPosition("sizeX", value)}
            />
            共{cfg.columns}列；
            <br/>
           部件位置垂直方向(行)：
            起点：
            <InputNumber
              min={0}
              max={cfg.maxSizeY}
              defaultValue={(position && position.row) || 0}
              onChange={value => processPosition("row", value)}
            />
            高度：
            <InputNumber
              min={cfg.minSizeY}
              max={cfg.maxSizeY}
              defaultValue={(position && position.sizeY) || cfg.defaultSizeY}
              onChange={value => processPosition("sizeY", value)}
            />
            每行{cfg.rowHeight}像素；
          </div>  
        </TabPane>
        <TabPane tab="点击设置" key="tabPop">          
          <Collapse accordion defaultActiveKey={['dashboard1']} >
          <Panel header="部件点击" key="dashboard1">
            <div>
            报表：
              <Select style={{ width: 352 }} 
                value={widgetOptions && widgetOptions.dashboard_id}
                onChange={value => processChange("dashboard_id", value)}
              >
              <Option value=''>--无--</Option>
              <Option value='HREF'>[外部链接：当前窗口]</Option>
              <Option value='URL'>[外部链接：新窗口]</Option>
              <Option value='POP'>[外部链接：弹出窗]</Option>
              {map(dashboardsAll, dashboard => (
                <Option value={dashboard.id}>{dashboard.name}</Option>
              ))}
              </Select>
            </div>  
            <div>
              <br/>
              部件属性图标：
              <Input type="text" style={{width:160}}
                value={widgetOptions && widgetOptions.pop_icon}
                onChange={e => processChange("pop_icon", e.target.value)}
              />
            (使用<a href="https://fontawesome.com/v4.7/icons/" rel="noopener noreferrer" target="_blank">fontawesome</a>图标,例：fa-external-link)
              <br/>
              <Radio.Group size="small" style={{ marginTop: 16 }}
                defaultValue={widgetOptions && widgetOptions.pop_icon}
                onChange={e => processChange("pop_icon", e.target.value)}
              >
                <Radio.Button key="fa-cog" value="fa-cog"><i className="fa fa-cog" /></Radio.Button>
                <Radio.Button key="fa-external-link" value="fa-external-link"><i className="fa fa-external-link" /></Radio.Button>
                <Radio.Button key="fa-plus" value="fa-plus"><i className="fa fa-plus" /></Radio.Button>
                <Radio.Button key="fa-file-excel-o" value="fa-file-excel-o"><i className="fa fa-file-excel-o" /></Radio.Button>
                <Radio.Button key="fa-file-word-o" value="fa-file-word-o"><i className="fa fa-file-word-o" /></Radio.Button>
                <Radio.Button key="fa-file-pdf-o" value="fa-file-pdf-o"><i className="fa fa-file-pdf-o" /></Radio.Button>
              </Radio.Group>&nbsp;&nbsp;
              <Checkbox
                name="pop_widget"
                checked={widgetOptions && widgetOptions.pop_widget}
                onChange={e => processChange("pop_widget", e.target.checked)}>
                部件全部区域点击弹出
              </Checkbox>  
            </div>  
            <div hidden={includes(['','HREF'], widgetOptions.dashboard_id)}>
              <br/>
              弹出窗口标题：
              <Input type="text" style={{width:300}}
                value={widgetOptions && widgetOptions.pop_title}
                onChange={e => processChange("pop_title", e.target.value)}
              />
            </div>  
            <div hidden={includes([''], widgetOptions.dashboard_id)}>
              <br/>
              外部链接/报表参数：
              <Input type="text" style={{width:268}}
                value={widgetOptions && widgetOptions.pop_url}
                onChange={e => processChange("pop_url", e.target.value)}
              />
              <br/>
              (支持url取数函数，
                <a href="https://www.dazdata.com/docs/college/markdown/3.html" target="_blank" rel="noopener noreferrer">官网指南</a>。
                例：https://www.dazdata.com&#63;id=&#123;&#123;&quot;parameter&quot;:&quot;id&quot;&#125;&#125;)
            </div>  
            <div hidden={!includes(['URL'], widgetOptions.dashboard_id)}>
              <br/>  
              链接窗口参数：
              <Input type="text" style={{width:300}}
                value={widgetOptions && widgetOptions.pop_width}
                onChange={e => processChange("pop_width", e.target.value)}
              />&nbsp;&nbsp;
              <Checkbox
                name="pop_urlblank"
                checked={widgetOptions && widgetOptions.pop_urlblank}
                onChange={e => processChange("pop_urlblank", e.target.checked)}>
                每外部链接打开一个新窗口
              </Checkbox>
              <br/>  
              (例：width=200,height=100,location=no)
            </div>
            <div hidden={!includes(['POP'], widgetOptions.dashboard_id)}>
              <br/>
            弹窗区域宽度：
              <Input type="text" style={{width:74}}
                value={widgetOptions && widgetOptions.pop_width}
                onChange={e => processChange("pop_width", e.target.value)}
              />
              高度：
              <Input type="text" style={{width:74}}
                value={widgetOptions && widgetOptions.pop_height}
                onChange={e => processChange("pop_height", e.target.value)}
              />
            </div>
            <div hidden={includes(['','HREF','URL','POP'], widgetOptions.dashboard_id)}>
              <br/>
              弹窗区域宽度
              <Input type="text" style={{width:74}}
                value={widgetOptions && widgetOptions.pop_width}
                onChange={e => processChange("pop_width", e.target.value)}
              />
              左距：
              <Input type="text" style={{width:74}}
                value={widgetOptions && widgetOptions.pop_left}
                onChange={e => processChange("pop_left", e.target.value)}
              />
              顶距：
              <Input type="text" style={{width:74}}
                value={widgetOptions && widgetOptions.pop_top}
                onChange={e => processChange("pop_top", e.target.value)}
              />
              (例：480px或50%)
              <br/>
              <br/>
              <Checkbox
                name="pop_show_header"
                checked={widgetOptions && widgetOptions.pop_show_header}
                onChange={e => processChange("pop_show_header", e.target.checked)}>
                显示报表标题
              </Checkbox>  
              <Checkbox
                name="pop_hide_parameters"
                checked={widgetOptions && widgetOptions.pop_hide_parameters}
                onChange={e => processChange("pop_hide_parameters", e.target.checked)}>
                隐藏报表筛选区
              </Checkbox>  
            </div>  
            <div hidden={includes(['','HREF','URL'], widgetOptions.dashboard_id)}>
              <br/>
              <Checkbox
                name="pop_refresh"
                checked={widgetOptions && widgetOptions.pop_refresh}
                onChange={e => processChange("pop_refresh", e.target.checked)}
              >
                弹窗关闭时刷新
              </Checkbox>
            </div>  
          </Panel>
          <Panel header="内容点击" key="dashboard2">
            <div>
              报表：
              <Select style={{ width: 352 }} 
                value={widgetOptions && widgetOptions.clickdashboard_id}
                onChange={value => processChange("clickdashboard_id", value)}>
              <Option value=''>--无--</Option>
              <Option value='HREF'>[外部链接：当前窗口]</Option>
              <Option value='URL'>[外部链接：新窗口]</Option>
              <Option value='POP'>[外部链接：弹出窗]</Option>
              <Option value='REFRESH'>[刷新当前报表]</Option>
              <Option value='WIDGETS'>[刷新指定部件]</Option>
              <Option value='VIEWS'>[多视图切换]</Option>
              {map(dashboardsAll, dashboard => (
                <Option value={dashboard.id}>{dashboard.name}</Option>
              ))}
              </Select>
            </div>  
            <div hidden={widgetOptions.clickdashboard_id!=='WIDGETS'}>
              <br/>
              刷新指定部件：
              <Input type="text" style={{width:300}}
                value={widgetOptions && widgetOptions.click_widgets}
                onChange={e => processChange("click_widgets", e.target.value)}
              />指定部件id,多个用逗号,分隔
            </div>  
            <div hidden={includes(['','HREF','REFRESH','WIDGETS','VIEWS'], widgetOptions.clickdashboard_id)}>
              <br/>
              弹出窗口标题
              <Input type="text" style={{width:300}}
                value={widgetOptions && widgetOptions.click_title}
                onChange={e => processChange("click_title", e.target.value)}
              />
            </div>  
            <div hidden={!includes(['HREF','URL','POP'], widgetOptions.clickdashboard_id)}>
              <br/>
              外部链接地址：
              <Input type="text" style={{width:300}}
                value={widgetOptions && widgetOptions.click_url}
                onChange={e => processChange("click_url", e.target.value)}
              />
              <br/>
              (支持url取数函数，
                <a href="https://www.dazdata.com/docs/college/markdown/3.html" target="_blank" rel="noopener noreferrer">官网指南</a>。
                例：https://www.dazdata.com&#63;id=&#123;&#123;&quot;parameter&quot;:&quot;id&quot;&#125;&#125;)
            </div>
            <div hidden={!includes(['URL'], widgetOptions.clickdashboard_id)}>
              <br/>
              链接窗口参数
              <Input type="text" style={{width:300}}
                value={widgetOptions && widgetOptions.click_width}
                onChange={e => processChange("click_width", e.target.value)}
              />&nbsp;&nbsp;
              <Checkbox
                name="click_urlblank"
                checked={widgetOptions && widgetOptions.click_urlblank}
                onChange={e => processChange("click_urlblank", e.target.checked)}>
                每外部链接打开一个新窗口
              </Checkbox>
              <br/> 
              (例：width=200,height=100,location=no)
            </div>  
            <div hidden={!includes(['POP'], widgetOptions.clickdashboard_id)}>
              弹窗区域宽度：
              <Input type="text" style={{width:74}}
                value={widgetOptions && widgetOptions.click_width}
                onChange={e => processChange("click_width", e.target.value)}
              />
              高度：
              <Input type="text" style={{width:74}}
                value={widgetOptions && widgetOptions.click_height}
                onChange={e => processChange("click_height", e.target.value)}
              />
            </div>
            <div hidden={includes(['','HREF','URL','POP','REFRESH','WIDGETS','VIEWS'], widgetOptions.clickdashboard_id)}>
              <br/>
              弹窗区域宽度：
              <Input type="text" style={{width:74}}
                value={widgetOptions && widgetOptions.click_width}
                onChange={e => processChange("click_width", e.target.value)}
              />
            左距：
              <Input type="text" style={{width:74}}
                value={widgetOptions && widgetOptions.click_left}
                onChange={e => processChange("click_left", e.target.value)}
              />
              顶距：
              <Input type="text" style={{width:74}}
                value={widgetOptions && widgetOptions.click_top}
                onChange={e => processChange("click_top", e.target.value)}
              />
              (例：480px或50%)
              <br/>
              <br/>
              <Checkbox
                name="click_show_header"
                checked={widgetOptions && widgetOptions.click_show_header}
                onChange={e => processChange("click_show_header", e.target.checked)}>
                显示报表标题
              </Checkbox>  
              <Checkbox
                name="click_hide_parameters"
                checked={widgetOptions && widgetOptions.click_hide_parameters}
                onChange={e => processChange("click_hide_parameters", e.target.checked)}>
                隐藏报表筛选区
              </Checkbox>  
            </div>
            <div hidden={includes(['','HREF','URL','REFRESH','WIDGETS','VIEWS'], widgetOptions.clickdashboard_id)}>
              <br/>
              <Checkbox
                name="click_refresh"
                checked={widgetOptions && widgetOptions.click_refresh}                
                onChange={e => processChange("click_refresh", e.target.checked)}>
                弹窗关闭时刷新
              </Checkbox> 
            </div>  
          </Panel>
          <Panel header="Table视图勾选点击" key="dashboard3" hidden={!widget.visualization || widget.visualization.type!=='TABLE'}>
            <div>
              报表
              <Select style={{ width: 352 }} 
                value={widgetOptions && widgetOptions.checkdashboard_id}
                onChange={value => processChange("checkdashboard_id", value)}
              >
              <Option value=''>--无--</Option>
              {map(dashboardsAll, dashboard => (
                <Option value={dashboard.id}>{dashboard.name}</Option>
              ))}
              </Select>
            </div>  
            <div hidden={includes([''], widgetOptions.checkdashboard_id)}>
              <br/>
              弹出窗口标题：
              <Input type="text" style={{width:300}}
                value={widgetOptions && widgetOptions.check_title}
                onChange={e => processChange("check_title", e.target.value)}
              />
              <br/>
              外部链接/报表参数：
              <Input type="text" style={{width:268}}
                value={widgetOptions && widgetOptions.check_url}
                onChange={e => processChange("check_url", e.target.value)}
              />
              <br/>
              (支持url取数函数，
                <a href="https://www.dazdata.com/docs/college/markdown/3.html" target="_blank" rel="noopener noreferrer">官网指南</a>。
                例：https://www.dazdata.com&#63;id=&#123;&#123;&quot;parameter&quot;:&quot;id&quot;&#125;&#125;)
            </div>  
            <div hidden={includes([''], widgetOptions.checkdashboard_id)}>
              <br/>
              弹窗区域宽度：
              <Input type="text" style={{width:74}}
                value={widgetOptions && widgetOptions.check_width}
                onChange={e => processChange("check_width", e.target.value)}
              />
              左距
              <Input type="text" style={{width:74}}
                value={widgetOptions && widgetOptions.check_left}
                onChange={e => processChange("check_left", e.target.value)}
              />
              顶距：
              <Input type="text" style={{width:74}}
                value={widgetOptions && widgetOptions.check_top}
                onChange={e => processChange("check_top", e.target.value)}
              />
              (例：480px或50%)
              <br/>
              <br/>
              <Checkbox
                name="check_show_header"
                checked={widgetOptions && widgetOptions.check_show_header}
                onChange={e => processChange("check_show_header", e.target.checked)}>
                显示报表标题
              </Checkbox>  
              <Checkbox
                name="check_hide_parameters"
                checked={widgetOptions && widgetOptions.check_hide_parameters}
                onChange={e => processChange("check_hide_parameters", e.target.checked)}>
                隐藏报表筛选区
              </Checkbox>  
            </div>  
            <div>
              <br/>
              <Checkbox
                name="check_refresh"
                checked={widgetOptions && widgetOptions.check_refresh}
                onChange={e => processChange("check_refresh", e.target.checked)}
              >
                弹窗关闭/执行成功刷新
              </Checkbox>
            </div>  
          </Panel>
          </Collapse>
        </TabPane>
        <TabPane tab="多视图" key="tabViews">          
          <div>
            多视图风格：
            <Select style={{ width: 200 }} 
              value={(widgetOptions && widgetOptions.toggle_view_style) || "Dropdown"} 
              onChange={value => processChange("toggle_view_style", value)}>
              <Option value='Dropdown'>下拉菜单切换</Option>
              <Option value='Menu'>导航菜单切换</Option>
              <Option value='Radio'>单选框切换</Option>
              <Option value='Bread'>面包屑导航</Option>
              <Option value='Auto'>[自动播放]</Option>
            </Select>
            下拉菜单提示标题：
            <Input type="text" style={{width:200}}
              value={(widgetOptions && widgetOptions.toggle_view_title)}
              disabled={widgetOptions && widgetOptions.toggle_view_style === 'Menu' ? true : false}
              onChange={e => processChange("toggle_view_title", e.target.value)}
            />
          </div>
          <div>
            <br/>
            <Collapse accordion defaultActiveKey={['view1']}>
              {["1","2","3","4","5"].map(item => (
                <Panel header={"视图" + item} key={'view' + item}>
                  查询：
                  {item==='1' && (<React.Fragment>
                    <QuerySelector selectedQuery={selectedQuery1} onChange={query => selectQuery(query ? query.id : null, parseInt(item))} />                    
                    { selectedQuery1 && (<VisualizationSelect
                      query={selectedQuery1} visualization={widgetOptions && widgetOptions["toggle_view" + item]}
                      onChange={visualizationId => processChange("toggle_view" + item, visualizationId)}
                    />)}
                    </React.Fragment>
                  )}
                  {item==='2' && (<React.Fragment>
                    <QuerySelector selectedQuery={selectedQuery2} onChange={query => selectQuery(query ? query.id : null, parseInt(item))} />                    
                    { selectedQuery2 && (<VisualizationSelect
                      query={selectedQuery2} visualization={widgetOptions && widgetOptions["toggle_view" + item]}
                      onChange={visualizationId => processChange("toggle_view" + item, visualizationId)}
                    />)}
                    </React.Fragment>
                  )}
                  {item==='3' && (<React.Fragment>
                    <QuerySelector selectedQuery={selectedQuery3} onChange={query => selectQuery(query ? query.id : null, parseInt(item))} />                    
                    { selectedQuery3 && (<VisualizationSelect
                      query={selectedQuery3} visualization={widgetOptions && widgetOptions["toggle_view" + item]}
                      onChange={visualizationId => processChange("toggle_view" + item, visualizationId)}
                    />)}
                    </React.Fragment>
                  )}
                  {item==='4' && (<React.Fragment>
                    <QuerySelector selectedQuery={selectedQuery4} onChange={query => selectQuery(query ? query.id : null, parseInt(item))} />                    
                    { selectedQuery4 && (<VisualizationSelect
                      query={selectedQuery4} visualization={widgetOptions && widgetOptions["toggle_view" + item]}
                      onChange={visualizationId => processChange("toggle_view" + item, visualizationId)}
                    />)}
                    </React.Fragment>
                  )}
                  {item==='5' && (<React.Fragment>
                    <QuerySelector selectedQuery={selectedQuery5} onChange={query => selectQuery(query ? query.id : null, parseInt(item))} />                    
                    { selectedQuery5 && (<VisualizationSelect
                      query={selectedQuery5} visualization={widgetOptions && widgetOptions["toggle_view" + item]}
                      onChange={visualizationId => processChange("toggle_view" + item, visualizationId)}
                    />)}
                    </React.Fragment>
                  )}
                  菜单项标题：
                  <Input type="text" style={{width:140}}
                    value={(widgetOptions && widgetOptions["toggle_view" + item + "_title"])} 
                    onChange={e => processChange("toggle_view" + item + "_title", e.target.value)}
                  />
                  图标：
                  <Input type="text" style={{width:140}}
                    value={widgetOptions && widgetOptions["toggle_view" + item + "_icon"]} 
                    onChange={e => processChange("toggle_view" + item + "_icon", e.target.value)}
                  />
                  <a href="https://ant.design/components/icon-cn/" rel="noopener noreferrer" target="_blank">AntD_V4图标</a>如：FileDoneOutlined
                </Panel>
              ))}
            </Collapse>
          </div>  
        </TabPane>
      </Tabs>
    </Modal>
  );
}

AddWidgetDialog.propTypes = {
  dialog: DialogPropType.isRequired,
  dashboard: PropTypes.object.isRequired,
  widget: PropTypes.object,
};

AddWidgetDialog.defaultProps = {
  widget: {},
};

export default wrapDialog(AddWidgetDialog);
